<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path d="
                M0 70
                Q 75 39, 150 70
                T 300 70 
                V 100 H 0 V 0" fill="#ccc">
        </path>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200">
        <g>
            <path d="M 0 70 Q 75 39, 150 70 T 300 70 T 450 70 T 600 70 T 750 70 V 100 H 0 V 0" fill="#ccc">
            </path>
            <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-300" dur="1.5s" repeatCount="indefinite">
            </animateTransform>
        </g>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200">
        <g fill="rgba(106,127,239,0.1)">
            <path d="M 0 70 Q 75 39, 150 70 T 300 70 T 450 70 T 600 70 T 750 70 V 100 H 0 V 0"></path>
            <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-300" dur="2.5s" repeatCount="indefinite"></animateTransform>
        </g>
        <g fill="rgba(106,127,239,0.15)">
            <path d="M 0 70 Q 87.5 47, 175 70 T 350 70 T 525 70 T 700 70 T 875 70 T 1050 70 V 100 H 0 V 0"></path>
            <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-350" dur="3.8s" repeatCount="indefinite"></animateTransform>
        </g>
        <g fill="rgba(106,127,239,0.18)" transform="translate(-903.868 0)">
            <path d="M 0 70 Q 135 36, 270 70 T 540 70 T 810 70 T 1080 70 V 100 H 0 V 0" transform="translate(-38.232284367796474, 0)"></path>
            <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-540" dur="4.6s" repeatCount="indefinite"></animateTransform>
        </g>
    </svg>
    <p>attributeName：需要运动的属性 type：具体运动的类型 from：运动初始值 to：运动终点值 dur：运动时间 repeatCount：重复次数，indefinite为无限循环
    </p>
</body>

</html>